<template>

    <div>
        <div class="custom-tree-container">
            <div class="block">
                <div class="tree">
                    <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree">
                    </el-tree>
                </div>
                <div class="footer">
                    <el-button @click="getCheckedNodes">添加菜单</el-button>
                    <el-button @click="delCheckedNodes">删除菜单</el-button>
                    <el-button @click="editCheckedNodes">编辑菜单</el-button>
                </div>
            </div>
            <div class="block">
                <el-form :model="treeform">
                    <el-form-item label="父菜单名称">
                        <input type="hidden" v-model="treeform.parentid">
                        <el-input v-model="treeform.parentMenu" style="width:260px" disabled auto-complete="off"></el-input>
                        <el-tooltip class="item" effect="dark" content="可重新选择左侧菜单作为父节点" placement="top-start">
                            <el-button v-show="editStatus" @click="secMenu">选择菜单</el-button>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="菜单名称">
                        <el-input v-model="treeform.name" style="width:260px" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单地址">
                        <el-input v-model="treeform.path" style="width:260px" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单类型">
                        <el-select v-model="treeform.type" placeholder="请选择菜单类型">
                            <el-option label="菜单" value="menu"></el-option>
                            <el-option label="按钮" value="button"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="footer">
                    <el-button type="primary" @click="addMenu">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        var _this = this;
        this.$http
            .post("/role/menuList")
            .then(res => {
                if (res.status == 200) {
                    //this.$store.commit('setMenuList',res.data.data)
                    _this.treeData = res.data.data;
                }
            })
            .catch(err => {
                console.log(err);
            });
    },
    methods: {
        secMenu() { //编辑时选中菜单
            let currentNode = this.$refs.tree.getCurrentNode(); //当前选中的节点
            if(this.nodex.id==currentNode.id){
                 this.$message({
                    type: "info",
                    message: "不能选择自己为父节点"
                });
                return false;
            }
            if (this.treeform.parentid != currentNode.id) {//原来的父节点和当前选中的节点不一致
                            //删除原来数据进行新增
                this.deleteLocalDep(this.treeData, this.nodex);
            }
            this.treeform.parentMenu = currentNode.label;
            this.treeform.parentid = currentNode.id;
        },
        editCheckedNodes() { //编辑触发的操作
            this.nodex = this.$refs.tree.getCurrentNode();

            if (this.nodex == null) {
                this.$message.error("请选择一个子节点");
                return false;
            }
            let parent = this.$refs.tree.currentNode.node.parent.data;
            this.editStatus = true;
            this.$http
                .post(
                    "/role/secMenu",
                    JSON.stringify({ id: this.nodex.id }),
                    {
                        headers: { "Content-Type": "application/json" }
                    }
                )
                .then(res => {
                    if (res.status == 200) {
                        res = res.data.data;
                        this.treeform.parentMenu = parent.label;
                        this.treeform.parentid = parent.id;
                        this.treeform.name = res.label;
                        this.treeform.path = res.path;
                        this.treeform.type = res.type;
                    } else {
                    }
                })
                .catch(err => {});
        },
        deleteLocalDep(treeData, data) {
            for (var i = 0; i < treeData.length; i++) {
                var td = treeData[i];
                if (td.id === data.id) {
                    treeData.splice(i, 1);
                    return;
                } else {
                    this.deleteLocalDep(td.children, data);
                }
            }
        },
        pushLocalDep(treeData, id, data) {
            for (var i = 0; i < treeData.length; i++) {
                var td = treeData[i];
                if (td.id === id) {
                    td.children.push(data);
                    return;
                } else {
                    this.pushLocalDep(td.children, id, data);
                }
            }
        },
        delCheckedNodes() {
            let node = this.$refs.tree.getCurrentNode();
            if (node == null) {
                this.$message.error("请选择一个子节点");
                return false;
            }

            if (node.children && node.children.length !== 0) {
                this.$message.error("此节点有子级，不可删除！");
                return false;
            }
            this.$http
                .post("/role/delmenu", JSON.stringify({ id: node.id }), {
                    headers: { "Content-Type": "application/json" }
                })
                .then(res => {
                    if (res.status == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    } else {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    }
                })
                .catch(err => {});

            this.deleteLocalDep(this.treeData, node);
            this.clearMenu();
            //this.zde
        },
        getCheckedNodes() {
            //添加菜单步骤
            this.clearMenu();
            let parentNode = this.$refs.tree.getCurrentNode();
            this.treeform.parentMenu = parentNode.label;
            this.treeform.parentid = parentNode.id;
        },
        clearMenu() {
            //清楚菜单元素
            this.treeform = {
                id: "",
                parentid: "",
                name: "",
                path: "",
                type: "",
                parentMenu: ""
            };
            this.editStatus = false;
        },
        addMenu() { //添加或编辑提交操作
            //确认按钮
            let uri = "";
            if (this.editStatus) {
                uri = "/role/editMenu";
                this.editStatus = false;
                this.treeform.id = this.nodex.id;
                this.deleteLocalDep(this.treeData, this.nodex);
            } else {
                uri = "/role/addMenu";
            }
            let self = this;
            this.zadd(uri, this.treeform).then(
                function(value) {
                    if (value.status === 200) {
                        const newChild = {
                            id: value.data || self.treeform.id,
                            label: self.treeform.name,
                            children: []
                        };
                        self.pushLocalDep(
                            self.treeData,
                            self.treeform.parentid,
                            newChild
                        );
                        self.clearMenu();
                        //self.$refs.treeform2.resetFields();
                    }
                },
                function(error) {
                    console.log(error);
                }
            );
        }
    },
    data() {
        return {
            editStatus: false,
            nodex: "",
            treeData: [],
            treeform: {
                id: "",
                parentid: "",
                name: "",
                path: "",
                type: "",
                parentMenu: ""
            }
        };
    }
};
</script>

<style scoped>
.custom-tree-container {
    display: flex;
    flex: 1;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 58px;
}
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 30px 20px 30px;
}
.block {
    flex: 1;
    border: 1px solid #ebebeb;
    height: 500px;
    padding: 40px;
    position: relative;
}
.block .tree {
    height: 400px;
    overflow-y: scroll;
}
.block .tree::-webkit-scrollbar {
    display: none;
}
</style>

